<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>商品详情</title>
	<link rel="stylesheet" href="../../css/common.css">
	<link rel="stylesheet" href="../../css/swiper.css">
	<link rel="stylesheet" href="../../imgs//font/iconfont.css">
	<link rel="stylesheet" href="../../css/goods/goodsDetail.css">
</head>
<body>
	<!-- 轮播图 -->
	<div class="swiper-container swiper-banner clearfix" style="background: #ffffff;">
		<div class="swiper-wrapper" id="topwoper" style="">
		</div>
		<div class="swiper-pagination"></div>
	</div>
	<div class="goods-info">
		<p class="info-name"></p>
		<p class="info-brief"></p>
		<p class="info-price"><del>￥345</del><span>￥455</span></p>
	</div>
	<div class="goods-promise">
		<ul>
			<li><span class="iconfont icon-duihao">&nbsp;全场包邮</span></li>
			<li><span class="iconfont icon-duihao">&nbsp;平台保证</span></li>
			<li><span class="iconfont icon-duihao">&nbsp;正品保证</span></li>
			<li><span class="iconfont icon-duihao">&nbsp;24小时发货</span></li>
		</ul>
	</div>

	<p class="clearfix specification">规格数量选择<span class="iconfont icon-right fr"></span></p>
	<div class="goods-param">
		<p class="goods-param">商品参数</p>
		<ul>
			<li><img src="" alt=""><p class=""></p><p class=""></p></li>
		</ul>
	</div>
	<p class="info-detail"></p>
	<!-- 常见问题 -->
	<p class="question"><span>—</span>&nbsp;&nbsp;&nbsp;常见问题&nbsp;&nbsp;&nbsp;<span>—</span></p>
	<ul class="issue">
	</ul>
	<!-- 大家都在看 -->
	<p class="question"><span>—</span>&nbsp;&nbsp;&nbsp;大家都在看&nbsp;&nbsp;&nbsp;<span>—</span></p>
	<ul class="allWatch"></ul>
	<div class="footer">
		<p><span></span></p>
		<p><b><em>2</em></b></p>
		<div>加入购物车</div>
		<div>立即购买</div>
	</div>

	<script src="../../js/rem.js"></script>
	<script src="../../js/template-web.js"></script>
	<script src="../../js/jquery-2.1.4.js"></script>
	<script src="../../js/swiper.min.js"></script>
	<script src="../../js/http.js"></script>
	<script src="../../js/getUrlParam.js"></script>
	<script src="../../js/api/goodsDetail.js"></script>
	<script>
		$(document).ready(function(){
			var goodsId=getUrlParam('id');
			detailApi.detailData({id:goodsId}).then(function(data){
				console.log(data)
				if(data.errno==0){
					bannerAd(data.data.info.gallery)
					goodsParam(data.data.attribute)
					issue(data.data.issue)
					$('.info-name').html(data.data.info.name)
					$('.info-brief').html(data.data.info.brief)
					$('.info-price del').html('原价：￥'+data.data.info.counterPrice)
					$('.info-price span').html('现价：￥' +data.data.info.retailPrice)
					$('.info-detail').html(data.data.info.detail)
					// $('.goods-param ul')
				} else {
					alert(data.errmsg)
				}
			})
			
			//轮播图
			var bannerAd = function(data){
				var html = template('adTmpl', {
					"list": data
				});
				// console.log(html)
				$("#topwoper").append(html);
				$(".swiper-banner").swiper({
					loop: true,
					autoplay: 3000
				});
			}

			//商品参数
			var goodsParam = function (data) {
				var html = template('goodsParam', {
					"list": data
				});
				// console.log(html)
				$(".goods-param ul").append(html);
			}
						//常见问题
			var issue = function (data) {
				var html = template('issue', {
					"list": data
				});
				// console.log(html)
				$(".issue").append(html);
			}

			//获取大家都在看的数据
			detailApi.related({ id: goodsId }).then(function (data) {
				console.log(data)
				if (data.errno == 0) {
					console.log(data)
					allWatch(data.data.goodsList)
				
				} else {
					alert(data.errmsg)
				}
			})

			var allWatch = function (data) {
				var html = template('allWatch', {
					"list": data
				});
				// console.log(html)
				$(".allWatch").append(html);
			}
		})
	</script>
		<!-- //轮播图 -->
		<script id="adTmpl" type="text/html">
			{{each list item i}}
		<div class="swiper-slide">
			<img class="link-img" src="{{item}}"/>
		</div>
	{{/each}}
	</script>
	<!-- //商品参数 -->
	<script id="goodsParam" type="text/html">
	{{each list item i}}
		<li><span class="">{{item.attribute}}</span><span>{{item.value}}</span></li>
	{{/each}}
	</script>
	<!-- //常见问题 -->
	<script id="issue" type="text/html">
		{{each list item i}}
		<li>
			<p><span class="iconfont icon-dian"></span>{{item.question}}</p>
			<p>{{item.answer}}</p>
		</li>
		{{/each}}
	</script>
	<!-- 大家都在看 -->
	<script id="allWatch" type="text/html">
		{{each list item i}}
		<li class="fl">
			<p class="img-content"><img src="{{item.picUrl}}" alt=""></p>
			<p>{{item.name}}</p>
			<p class="clearfix"><span class="fl">￥{{item.retailPrice}}</span><em class="fr">{{item.saleCount}}人已抢</em></p>
		</li>
		{{/each}}
	</script>
</body>
</html>
